<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户管理</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/jq-paginator.js"></script>
    <script type="text/javascript">
        //全局信息
        window.datas = {
            //查询条件
            conditionInfo: {
                    company: '',
                    pageNum: "1",
                    pageSize: "5",
            },
            //查询信息
            resultInfo: {},
            //地区信息
            addressInfo:[],
            //部门职业用户三级联查信息
            deptJobUserInfo:[],
            //所选择的部门职位信息
            jobs:[],
        };

        function tipOpen(target) {
            //获取客户状态及id
            let status=$(target).parents("td").siblings("td").eq(6).data("status");
            let customid=$(target).parents("td").siblings("input").val();
            let content=''
            if(status==1){content="是否确认注销此条信息"}
            if(status==0){content="是否确认恢复此条信息"}
            //放入id与状态码
            $(".tipright p").text(content);
            $(".tipbtn>.tipstatus").val(status)
            $(".tipbtn>.tipid").val(customid)
            $("#tip").fadeIn(200);
        }

        function tipClose() {
            $("#tip").fadeOut(200);
        }

         function allottipOpen(target) {
            let index=$(target).parents("tr").index();
            let customInfo=datas.resultInfo.data[index];
            let userId=datas.resultInfo.data[index].serviceid;
            //放置已分配信息
             getSelectedDeptInfo(userId);
            //将被分配的客户id放入提交表单中
            let customid=customInfo.customid;
            $(".allotId").val(customid);
            $("#allottip").fadeIn(200);
        }

        function allottipclose() {
            $("#allottip").fadeOut(200);
        }
        //获取当前分配信息
        function getSelectedDeptInfo(userId){
         $.ajax({
                url: `/commonDeptJobUser/${userId}`,
                type: "get",
                dataType: "json",
                success:(data)=>{
                    let deptInfo=data.data[0];
                    if(deptInfo) {
                        $(".dept").val(deptInfo.deptId);
                        deptChange();
                        $(".job").val(deptInfo.jobs[0].jobId);
                        jobChange()
                        $("#user").val(deptInfo.jobs[0].users[0].uid);
                    }else {
                        $(".dept").val("1");
                        deptChange();
                        jobChange()
                    }
                }
            })
        }
        //获取分页信息
        function getCustomPage(conditionInfo) {
            $.ajax({
                url: `/custom/page`,
                type: "post",
                dataType: "json",
                contentType: "application/json;charset=utf8",
                data: JSON.stringify(conditionInfo),
                success: (data) => {
                    datas.resultInfo = data.data;
                    if(!data.data.totalPage){
                        datas.resultInfo.totalPage=1;
                    }
                    reder();
                    $('.paginList').jqPaginator('option', {
                        totalPages: datas.resultInfo.totalPage,
                    });
                }
            })
        }
        //获取地区信息
        function getAddressInfo(){
            $.ajax({
                url: "/commonProvince",
                type: "get",
                dataType: "json",
                success:(data)=>{
                    window.datas.addressInfo=data.data;
                    $(".province").html('<option value="">请选择省份</option>')
                    window.datas.addressInfo.forEach((item,index)=>{
                        $(".province").append(`<option value="${item.id}">${item.pname}</option>`)
                    })
                }
            })
        }
        //选择省份之后
        function provinceChange(){
            let addressInfo=datas.addressInfo;
            let city=[];
            let id=$(".province option:selected").val();
            for (let i = 0;i< addressInfo.length; i++) {
                if(addressInfo[i].id==id){
                     city=addressInfo[i].citys;
                     break;
                }
            }
            $(".city").html('<option value="">请选择城市</option>')
            city.forEach((item,index)=>{
                $(".city").append(`<option value="${item.id}">${item.cname}</option>`);
            })
        }
        //获取部门职位用户三级联查信息
        function getDeptJobUser(){
            $.ajax({
                url: "/commonDeptJobUser",
                type: "get",
                dataType: "json",
                success:(data)=>{
                    window.datas.deptJobUserInfo=data.data;
                    $(".dept").html('<option value="0">请选择</option>')
                    window.datas.deptJobUserInfo.forEach((item,index)=>{
                        $(".dept").append(`<option value="${item.deptId}">${item.deptName}</option>`)
                    })
                    $(".dept").val("1");
                    deptChange();
                }
            })
        }
        //选择部门后
        function deptChange(){
            let deptJobUSerInfo=datas.deptJobUserInfo;
            let job=[];
            let id=$(".dept option:selected").val();
            for (let i = 0;i< deptJobUSerInfo.length; i++) {
                if(deptJobUSerInfo[i].deptId==id){
                    job=deptJobUSerInfo[i].jobs;
                    break;
                }
            }
            datas.jobs=job
            $(".job").html('<option value="">请选择</option>')
            job.forEach((item,index)=>{
                $(".job").append(`<option value="${item.jobId}">${item.jobName}</option>`);
            })
            $(".job").val("3");
            jobChange();
        }
        //选择职位后
        function jobChange(){
            let jobs=datas.jobs;
            let users=[];
            let id=$(".job option:selected").val();
            for (let i = 0;i< jobs.length; i++) {
                if(jobs[i].jobId==id){
                    users=jobs[i].users;
                    break;
                }
            }
            $("#user").html('<option value="0">请选择</option>')
            users.forEach((item,index)=>{
                $("#user").append(`<option value="${item.uid}">${item.uname}</option>`);
            })
        }
        //数据渲染到页面
        function reder() {
            let customInfo = this.datas.resultInfo.data;
            $(".formbody").html("");
            customInfo.forEach((item, index) => {
                $(".formbody").append(`<tr>
           <input type="hidden" value="${item.customid}"/>
          <td>${(datas.resultInfo.pageNum-1)*datas.resultInfo.pageSize+index+1}</td>
          <td>${item.customname}</td>
          <td>${item.sex == 2 ? '男' : '女'}</td>
          <td>${item.telephone}</td>
          <td>${item.company}</td>
          <td>${item.provinceName+item.cityName}</td>
          <td data-status='${item.status}'>${item.status==1?'可用':'不可用'}</td>
          <td>${item.createtime}</td>
          <td>${item.createdName}</td>
          <td>${item.distractime}</td>
          <td>${item.serviceName}</td>
          <td>
          <a  class="tablelink" onclick="window.location.href='customerView?customid=${item.customid}'">查看详情</a>
            <a href="javascript:void(0)" class="tablelink" onclick="toModify(this)">修改</a>
            <a href="javascript:void(0)" class="tablelink" onclick="tipOpen(this)">${item.status==1?'注销':'恢复'}</a>
            <a href="javascript:void(0);" class="tablelink" onclick="allottipOpen(this)">分配</a>
          </td>
        </tr>`)
            });
            $(".blue").eq(0).text(this.datas.resultInfo.totalCount);
            $(".blue").eq(1).text(this.datas.resultInfo.pageNum);
        }
        //获取condition参数
        function getCondition(){
            this.datas.conditionInfo={
                pageNum:1,
                pageSize:5,
                company: $(".company").val(),
                customName:$(".customName").val(),
                provinceId:$(".province option:selected").val(),
                address:$(".city option:selected").val(),
                status:$(".status option:selected").val(),
                isAttr:$(".isAttr option:selected").val()
            }
        }
        //点击查询时
        function search() {
            datas.conditionInfo.pageNum = 1;
            getCondition();
            getCustomPage(datas.conditionInfo);
        }
        //跳转修改页面
        function toModify(target){
            let index=$(target).parents("tr").index();
            sessionStorage.setItem("ModifyInfo",JSON.stringify(datas.resultInfo.data[index]));
            location.href="/market/customer/customerUpdate";
        }
        //改变客户状态
        function changeStatus(target){
            let status=$(target).siblings(".tipstatus").val();
            let id=$(target).siblings(".tipid").val();
            $.ajax({
                url:`/custom/${id}/${status}`,
                type:"put",
                dataType:"json",
                contentType: "application/json;charset:utf8",
                data: JSON.stringify(datas.conditionInfo),
                success:(data)=>{
                    datas.resultInfo = data.data;
                    reder();
                    tipClose();
                }
            })
        }
        //分配用户
        function distributeCustom(){
            let userId=$("#user option:selected").val();
            let customId=$(".allotId").val();
            $.ajax({
                url:`/custom/distributeCustom/${customId}/${userId}`,
                type:"put",
                dataType:"json",
                contentType: "application/json;charset:utf8",
                data: JSON.stringify(datas.conditionInfo),
                success:(data)=>{
                    datas.resultInfo = data.data;
                    reder();
                    allottipclose()
                }
            })
        }
        $(() => {
            //初始化分页器
            $(".paginList").jqPaginator({
                totalPages: 10,
                visiblePages: 10,
                currentPage: 1,
                activeClass: 'current',
                disableClass: 'disabled',
                prev: '<li class="prev paginItem"><a><span class="pagepre"></span></a></li>',
                next: '<li class="next paginItem"><a><span class="pagenxt"></span></a></li>',
                page: '<li class="page paginItem"><a>{{page}}</a></li>',
                onPageChange: (num)=> {
                    getCondition();
                    datas.conditionInfo.pageNum=num;
                    getCustomPage(window.datas.conditionInfo);
                }
            });
            //获取地区信息
            getAddressInfo();
            //获取部门职位用户三级联查信息
            getDeptJobUser();
        })
    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>客户管理</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form  class="searchCondition">
        <ul class="tools">
            <li> 公司名称:
                <input type="text" size="12" name="company" class="company"/>
            </li>
            <li> 客户姓名:
                <input type="text" size="12" name="customName" class="customName"/>
            </li>
            <li> 所属区域：
                <select class="province" name="provinceId" onchange="provinceChange()">
                    <option value="">请选择省份</option>
                </select>
                <select class="city">
                    <option value="">请选择城市</option>
                </select>
            </li>
            <li> 状态：
                <select name="status" class="status">
                    <option value="">请选择</option>
                    <option value="1">可用</option>
                    <option value="0">不可用</option>
                </select>
            </li>
            <li> 是否分配：
                <select name="isAttr" class="isAttr">
                    <option value="">请选择</option>
                    <option value="1">已分配</option>
                    <option value="0">未分配</option>
                </select>
            </li>
            <li class="subBut" onclick="search()"><img src="../../../static/images/t06.png"/>查询</li>
            <li class="subBut" onclick="window.location.href='/market/customer/customerAdd'"><img
                    src="../../../static/images/t01.png"/>添加
            </li>
        </ul>
    </form>
    <table class="tablelist">
        <thead>
        <tr>
            <th>序号</th>
            <th>客户姓名</th>
            <th>性别</th>
            <th>联系电话</th>
            <th>所属公司</th>
            <th>所属区域</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>创建人</th>
            <th>分配时间</th>
            <th>客户人员</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="formbody">

        </tbody>
    </table>
    <div class="pagin">
        <div class="message">共<i class="blue"></i>条记录，当前显示第&nbsp;<i class="blue"></i>页</div>
        <!--      分页菜单-->
        <ul class="paginList">
        </ul>
    </div>
    </form>
    <!-- 提示框 -->
    <div id="tip" class="tip">
        <div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
        <div class="tipinfo"><span><img src="../../../static/images/ticon.png"/></span>
            <div class="tipright">
                <p></p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite></div>
        </div>
        <div class="tipbtn">
            <input class="tipstatus" name="status" type="hidden">
            <input class="tipid" name="customid" type="hidden">
            <input name="" type="button" class="sure" value="确定" onclick="changeStatus(this)"/>
            <input name="" type="button" class="cancel" value="取消" onclick="tipClose()"/>
        </div>
    </div>
    <!-- 审批提示框 -->
    <div id="allottip" class="tip">
        <div class="tiptop">
            <span>提示信息</span><a onclick="allottipclose()"></a>
        </div>
        <div class="tipinfo1">
            <input type="hidden" class="allotId">
            部门：
            <select class="dfselect dept" disabled onchange="deptChange()">
                <option>请选择</option>
            </select>
            <p/>
            职位：
            <select class="dfselect job" disabled onchange="jobChange()">
                <option>请选择</option>
            </select>
            <p/>
            姓名：
            <select id="user" class="dfselect">
                <option>请选择</option>
            </select>
            <p/>
        </div>
        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定" onclick="distributeCustom()"/>
            &nbsp;
            <input name="" type="button" class="cancel" value="取消" onclick="allottipclose()"/>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
